<template>
    <WorkflowApproval :tabTitle="tabTitle" :showApproval="showApproval">
      <template v-slot:bizForm>
        <div v-if="!processed">
          <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="开始时间" label-width="100px" prop="kssj">
              <el-date-picker clearable
                v-model="form.kssj"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请选择请假开始时间"
                style="width: 95%;" >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间" label-width="100px" prop="jssj">
              <el-date-picker clearable
                v-model="form.jssj"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请选择请假结束时间"
                style="width: 95%;" >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="请假事由" label-width="100px" prop="qjsy">
              <el-input v-model="form.qjsy" type="textarea" :rows="5" placeholder="请输入请假事由" style="width: 95%;" />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="saveDraft">保存草稿</el-button>
            <el-button type="success" @click="submitForm">提交申请</el-button>
            <el-button @click="cancel">重填</el-button>
          </div>
        </div>
        <div v-if="processed">
          <el-form ref="form" :model="form" label-width="120px" size="mini">
            <el-row>
              <el-col :span="24">
                <el-form-item label="开始时间：">{{ parseTime(form.kssj, '{y}-{m}-{d}') }}</el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="结束时间：">{{ parseTime(form.jssj, '{y}-{m}-{d}') }}</el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="请假事由：">{{ form.qjsy }}</el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </template>
    </WorkflowApproval>
</template>

<script>
  import {addLeave,getLeave} from "@/api/office/leave"
  import WorkflowApproval from '@/components/WorkflowApproval'

  export default {
    name: "Leave",
    components: {
      WorkflowApproval
    },
    data() {
      return {
        tabTitle: "填写申请",
        //流程定义id
        definitionId: null,
        //部署id
        deployId: null,
        //业务主键id
        businessKey: null,
        //是否审批流程
        processed: true,
        // 遮罩层
        loading: false,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 请假表格数据
        leaveList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 请假时间时间范围
        daterangeQjsj: [],
        // 分页参数
        pageParams: {
          current: 1,
          size: 10,
        },
        // 查询参数
        queryParams: {
          id: null,
          userName: null,
          qjsj: null,
          beginQjsj: null,
          endQjsj: null,
          tjzt: null
        },
        // 表单参数
        form: {
          kssj: null,
          jssj: null,
          qjsy: null
        },
        // 表单校验
        rules: {
          kssj: [
            { required: true, message: "请假开始时间不能为空", trigger: "blur" }
          ],
          jssj: [
            { required: true, message: "请假结束时间不能为空", trigger: "blur" }
          ],
          qjsy: [
            { required: true, message: "请假事由不能为空", trigger: "blur" }
          ],
        },
        //是否展示审批相关页面内容
        showApproval: true,
        //是否重新发起申请
        fillAgain: false,
        //是否需要生成新记录
        newRecord: false
      };
    },
    created() {
      let detailParams = JSON.parse(window.localStorage.getItem("flowableDetailParams"));

      this.definitionId = detailParams.definitionId;

      this.deployId = detailParams.deployId;

      this.businessKey = detailParams.businessKey;

      if(detailParams && detailParams.hasOwnProperty("processed")){
        this.processed = detailParams.processed;
      }

      if(detailParams && detailParams.hasOwnProperty("showApproval")){
        this.showApproval = detailParams.showApproval;
      }

      if(detailParams && detailParams.hasOwnProperty("fillAgain")){
        this.fillAgain = detailParams.fillAgain;
      }

      if(detailParams && detailParams.hasOwnProperty("newRecord")){
        this.newRecord = detailParams.newRecord;
      }
      
      this.init();
    },
    methods: {
      /** 新增按钮操作 */
      init() {
        this.reset();
        let needQuery = false;
        if(this.processed){
          //流程审批查看申请单明细
          this.tabTitle = "流程审批";
          needQuery = true;
        }else{
          //再次发起申请
          if(this.fillAgain){
            needQuery = true;
          }
        }
        if(needQuery){
          getLeave(this.businessKey).then(res => {
            this.form.kssj = res.data.kssj;
            this.form.jssj = res.data.jssj;
            this.form.qjsy = res.data.qjsy;
          })
        }
      },
      
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: this.businessKey,
          userId: null,
          userName: null,
          kssj: null,
          jssj: null,
          qjsy: null,
          qjsj: null,
          definitionId: this.definitionId,
          deployId: this.deployId
        };
        this.resetForm("form");
      },
      
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.queryParams.tjzt = "1";
            //发起新申请
            if(this.newRecord){
              this.form.id = null;
            }else{
              //修改当前记录
              this.form.id = this.businessKey;
            }
            addLeave(this.form,this.queryParams).then(response => {
              if(response.code==='200') {
                this.$modal.msgSuccess(response.msg);
                this.open = false;
                // 关闭当前标签页并返回上个页面
                this.$tab.closePage(this.$route);
                this.$router.back();
              }else {
                this.$modal.msgError(response.msg);
              }
            });
          }
        });
      },

      /** 草稿按钮 */
      saveDraft() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.queryParams.tjzt = "0";
            //发起新申请
            if(this.newRecord){
              this.form.id = null;
            }else{
              //修改当前记录
              this.form.id = this.businessKey;
            }
            addLeave(this.form,this.queryParams).then(response => {
              if(response.code==='200') {
                this.$modal.msgSuccess(response.msg);
                this.open = false;
                // 关闭当前标签页并返回上个页面
                this.$tab.closePage(this.$route);
                this.$router.back();
              }else {
                this.$modal.msgError(response.msg);
              }
            });
          }
        });
      }
    }
  };
</script>
